<template>
  <div class="search-form">
    <t-card title="搜索条件" :bordered="false" hover-shadow>
      <t-form
        ref="form"
        :data="formData"
        :label-width="84"
        @reset="onReset"
        @submit="onSubmit"
        class="form-container"
      >
        <t-row :gutter="[32, 24]" class="form-content">
                      <t-col :span="8">
              <t-form-item label="订单编号" name="orderNumber">
                <t-input
                  v-model="formData.orderNumber"
                  placeholder="请输入订单编号"
                  clearable
                  style="width: 240px"
                />
              </t-form-item>
            </t-col>
            <t-col :span="8">
              <t-form-item label="用户ID" name="userId">
                <t-input
                  v-model="formData.userId"
                  placeholder="请输入用户ID"
                  clearable
                  style="width: 240px"
                />
              </t-form-item>
            </t-col>
          <t-col :span="24">
            <div class="operation-btns">
              <div class="left-btns">
                <t-space size="small">
                  <t-button theme="primary" type="submit" variant="base">查询</t-button>
                  <t-button theme="default" variant="base" type="reset">重置</t-button>
                </t-space>
              </div>
              <div class="right-btns">
                <t-button theme="primary" @click="handleAdd" variant="base">新增</t-button>
              </div>
            </div>
          </t-col>
        </t-row>
      </t-form>
    </t-card>
  </div>
</template>

<script setup lang="ts">
import { ref } from 'vue';
import type { OrderInfo } from '@/api/product-orders';

const formData = ref<Partial<OrderInfo>>({});
const emit = defineEmits(['search', 'add']);

const onSubmit = () => {
  emit('search', { ...formData.value });
};

const onReset = () => {
  formData.value = {};
  emit('search', {});
};

const handleAdd = () => {
  emit('add');
};
</script>

<style lang="less" scoped>
.search-form {
  margin-bottom: 24px;

  :deep(.t-card) {
    background-color: var(--td-bg-color-container);
    border-radius: var(--td-radius-medium);
    transition: box-shadow 0.2s ease;

    &:hover {
      box-shadow: var(--td-shadow-2);
    }
  }

  :deep(.t-card__title) {
    font-size: 16px;
    font-weight: 600;
    color: var(--td-text-color-primary);
  }

  .form-container {
    padding: 8px 0;
  }

  .form-content {
    margin: 0 -8px;
  }

  :deep(.t-form__item) {
    margin-bottom: 0;
    padding: 0 8px;
  }

  .operation-btns {
    display: flex;
    justify-content: space-between;
    align-items: center;
    padding: 16px 8px 0;
    margin-top: 8px;
    border-top: 1px solid var(--td-component-stroke);
    
    .left-btns {
      display: flex;
    }
    
    .right-btns {
      display: flex;
    }
  }
}
</style>